<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style type="text/css">
        .el-main{
            position: absolute;
            top: 83px;
            bottom: 0px;
            left: 220px;
            right: 10px;
            padding: 0;
        }

        /*以下是上传图片样式*/
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: gray;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        #app{
           margin-left: 600px;
        }

    </style>
</head>

<body class="hold-transition">
<div id="app">



            <el-upload
                    class="avatar-uploader"
                    action=""
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

                <!--查询表单-->
    <div id="a1">
                <el-form :inline="true" >


                    <el-form-item label="用户名"><el-input ></el-input></el-form-item>
                    <br/>


                    <br/>

                    <el-form-item label="所属角色" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择活动区域"mutiple="true">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <br/>
                    <el-form-item label="即时配送" prop="delivery">
                        <el-switch v-model="ruleForm.delivery"></el-switch>
                    </el-form-item>
                    <br/>
                    <el-form-item label="密码"><el-input v-model="searchMap.newpassword"></el-input></el-form-item>
                    <br/>


                    <el-button type="primary" class="dalfBut" @click="save()">保存</el-button>

                </el-form>






    </div>



</div>
</body>
<script src="/js/axios.js"></script>
<script src="/js/vue.js"></script><!-- vue -->
<script src="/js/elementui.js"></script><!-- element-ui -->

<script>
    new Vue({
        el: '#app',
        data(){
            return {
                tableData: [],
                searchMap: {},
                imageUrl: '',

                ruleForm: {
                    region: '',
                    delivery: false
                },

            }
        },
        created(){
            this.fetchData();
        },
        methods:{
            fetchData (){
                axios.get('/admin/add.do',this.pojo).then(response=>{
                    this.loginName=response.data;

                })
            },

            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },

            save (){
                // this.pojo.image= this.imageUrl; //如页面有图片上传功能放开注释
                axios.post(`/admin/add.do`,this.searchMap).then( response => {
                    location.href="changePassword.html"
                });
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }

    })
</script>
</html>